<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>摄像头功能测试</title>
    <script src="https://cdn.jsdelivr.net/npm/tracking@1.1.3/build/tracking-min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/tracking@1.1.3/build/data/face-min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .camera-container {
            width: 320px;
            height: 240px;
            border: 2px solid #409EFF;
            border-radius: 4px;
            overflow: hidden;
            position: relative;
            margin: 20px 0;
        }

        #video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .camera-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .status {
            margin: 10px 0;
            padding: 10px;
            border-radius: 4px;
            font-weight: bold;
        }

        .status-ok {
            background-color: #f0f9ff;
            color: #67C23A;
            border: 1px solid #67C23A;
        }

        .status-warning {
            background-color: #fdf6ec;
            color: #E6A23C;
            border: 1px solid #E6A23C;
        }

        .controls {
            margin: 20px 0;
        }

        button {
            padding: 10px 20px;
            margin: 5px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }

        .btn-primary {
            background-color: #409EFF;
            color: white;
        }

        .btn-primary:hover {
            background-color: #66B1FF;
        }

        .btn-danger {
            background-color: #F56C6C;
            color: white;
        }

        .btn-danger:hover {
            background-color: #f78989;
        }

        .info {
            background-color: #f4f4f5;
            padding: 15px;
            border-radius: 4px;
            margin: 20px 0;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>摄像头功能测试</h1>

        <div class="info">
            <h3>测试说明：</h3>
            <ul>
                <li>点击"启动摄像头"按钮开始测试</li>
                <li>允许浏览器访问摄像头权限</li>
                <li>观察人脸检测功能是否正常工作</li>
                <li>测试完成后点击"停止摄像头"</li>
            </ul>
        </div>

        <div class="controls">
            <button class="btn-primary" onclick="startCamera()">启动摄像头</button>
            <button class="btn-danger" onclick="stopCamera()">停止摄像头</button>
        </div>

        <div class="camera-container" id="cameraContainer" style="display: none;">
            <video id="video" autoplay muted></video>
            <canvas class="camera-canvas" id="canvas"></canvas>
        </div>

        <div id="status" class="status" style="display: none;">
            <span id="statusText">正在检测...</span>
        </div>

        <div class="info">
            <h3>检测结果：</h3>
            <p id="result">等待启动摄像头...</p>
        </div>
    </div>

    <script>
        let isCameraActive = false;
        let faceDetected = false;
        let tracker = null;

        async function startCamera() {
            if (isCameraActive) {
                alert('摄像头已经启动');
                return;
            }

            try {
                const stream = await navigator.mediaDevices.getUserMedia({
                    video: {
                        width: { ideal: 320 },
                        height: { ideal: 240 },
                        facingMode: 'user'
                    }
                });

                const video = document.getElementById('video');
                video.srcObject = stream;
                isCameraActive = true;

                document.getElementById('cameraContainer').style.display = 'block';
                document.getElementById('status').style.display = 'block';

                video.onloadedmetadata = () => {
                    startFaceDetection();
                };

                updateResult('摄像头启动成功，开始人脸检测...');
            } catch (error) {
                console.error('摄像头访问失败:', error);
                updateResult('摄像头访问失败: ' + error.message);
            }
        }

        function startFaceDetection() {
            if (typeof tracking === 'undefined') {
                updateResult('tracking.js 库未加载');
                return;
            }

            const video = document.getElementById('video');
            const canvas = document.getElementById('canvas');
            const context = canvas.getContext('2d');

            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;

            tracker = new tracking.ObjectTracker(['face']);
            tracker.setInitialScale(4);
            tracker.setStepSize(2);
            tracker.setEdgesDensity(0.1);

            tracker.on('track', (event) => {
                context.clearRect(0, 0, canvas.width, canvas.height);

                if (event.data.length > 0) {
                    faceDetected = true;
                    updateStatus('检测到人脸', 'status-ok');

                    event.data.forEach((rect) => {
                        context.strokeStyle = '#00ff00';
                        context.lineWidth = 2;
                        context.strokeRect(rect.x, rect.y, rect.width, rect.height);
                    });
                } else {
                    faceDetected = false;
                    updateStatus('未检测到人脸', 'status-warning');
                }
            });

            tracking.track('#video', tracker);
            updateResult('人脸检测已启动');
        }

        function stopCamera() {
            if (!isCameraActive) {
                alert('摄像头未启动');
                return;
            }

            const video = document.getElementById('video');
            if (video && video.srcObject) {
                video.srcObject.getTracks().forEach(track => {
                    track.stop();
                });
                video.srcObject = null;
            }

            if (tracker) {
                tracker.removeAllListeners('track');
                tracking.track('#video', null);
                tracker = null;
            }

            isCameraActive = false;
            faceDetected = false;

            document.getElementById('cameraContainer').style.display = 'none';
            document.getElementById('status').style.display = 'none';
            updateResult('摄像头已停止');
        }

        function updateStatus(text, className) {
            const statusElement = document.getElementById('status');
            const statusTextElement = document.getElementById('statusText');

            statusElement.className = 'status ' + className;
            statusTextElement.textContent = text;
        }

        function updateResult(text) {
            document.getElementById('result').textContent = text;
        }

        // 页面卸载时清理资源
        window.addEventListener('beforeunload', () => {
            if (isCameraActive) {
                stopCamera();
            }
        });
    </script>
</body>

</html>